<script setup lang="ts">
import type { CronItem } from '~/composables/cron'
import { useCornFormat } from '~/composables/cron'
import { hourOptions } from '@/utils/constant'

const data = reactive<CronItem>({
  type: '*',
  intervalStart: 0,
  interval: 5,
  rangeStart: 0,
  rangeEnd: 24,
  specific: [0], // 指定
})

const formatStr = useCornFormat(data)

defineExpose({
  formatStr,
})
</script>

<template>
  <a-radio-group v-model:value="data.type">
    <a-radio class="item" value="*">
      每一小时
    </a-radio>
    <a-radio class="item" value="interval">
      <span class="flex items-center">
        从<a-input-number v-model:value="data.intervalStart" class="mx-2" :min="0" :max="24" />时开始,
        每隔<a-input-number v-model:value="data.interval" class="mx-2" :min="1" :max="24" />小时
      </span>
    </a-radio>
    <a-radio class="item" value="range">
      <span class="flex items-center">
        周期从<a-input-number v-model:value="data.rangeStart" class="mx-2" :min="0" :max="data.rangeEnd" />
        到<a-input-number v-model:value="data.rangeEnd" class="mx-2" :min="data.rangeStart" :max="24" />小时
      </span>
    </a-radio>
    <a-radio class="item" value="specific">
      <div class="flex items-center">
        <!-- <a-select v-model:value="data.specific" class="w-[200px]" :max-tag-count="1" mode="multiple" allow-clear :options="hourOptions" @click.prevent /> -->
        <a-checkbox-group v-model:value="data.specific" name="checkboxgroup" :options="hourOptions" />
      </div>
    </a-radio>
  </a-radio-group>
</template>

<style scoped lang="less">
.item {
@apply flex line-height-8 mb-2;
}
</style>
